<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TuanGo</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="container">
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="image/示例图片01.png" alt="商品图片1">
            </div>
            <div class="swiper-slide">
                <img src="image/示例图片02.png" alt="商品图片2">
            </div>
            <div class="swiper-slide">
                <img src="image/示例图片03.png" alt="商品图片3">
            </div>
            <div class="swiper-slide">
                <img src="image/示例图片04.png" alt="商品图片4">
            </div>
        </div>
    </div>

    <div class="product-info">
        <h1 class="product-title">像素棱镜：幻域秘钥</h1>
        <div class="promotion-banner">
            大促优惠！直降 ¥<span id="deduction">60</span>，<span id="buyerCount">76</span>人在抢，参与马上抢到
        </div>

        <div class="team-list" id="teamList">
            <!-- 团队列表将通过JavaScript动态生成 -->
        </div>

        <div class="price-section">
            <div class="price-info">
                <span class="price">¥<span id="groupPrice">0</span></span>
                <span class="original-price">¥<span id="originalPrice">0</span></span>
            </div>
            <div class="action-buttons">
                <button class="join-btn buy-alone" onclick="handleBuyAlone()">单独购买</button>
                <button class="join-btn start-group" onclick="handleStartGroup()">开团购买</button>
            </div>
        </div>
    </div>
</div>

<!-- 登录弹窗 -->
<div class="modal" id="loginModal">
    <div class="modal-content">
        <h2>欢迎登录</h2>
        <form class="login-form" onsubmit="handleLogin(event)">
            <input type="text" id="username" placeholder="用户名" required>
            <input type="password" id="password" placeholder="密码" required>
            <button type="submit" class="login-btn">登录</button>
        </form>
    </div>
</div>

<!-- 支付弹窗 -->
<div class="modal qr-modal" id="qrModal">
    <div class="modal-content">
        <h2>请扫码支付</h2>
        <img class="qr-code" src="image/彩色二维码.png" id="qrCode" alt="支付二维码">
        <div class="modal-buttons">
            <button class="join-btn" onclick="handleCancelPayment()">取消支付</button>
            <button class="join-btn start-group" onclick="handlePaymentComplete()">支付完成</button>
        </div>
    </div>
</div>

<!-- 成功弹窗 -->
<div class="modal success-modal" id="successModal">
    <div class="modal-content">
        <h2>支付成功！</h2>
        <p>感谢您的购买</p>
        <button class="join-btn start-group" onclick="closeSuccessModal()">确定</button>
    </div>
</div>

<script src="js/index.js"></script>
</body>
</html>

